<template>
  <div class="">
    <div class="wrap customized">
      <p class="title">
        我们为每一个孩子提供<span>定制化</span>家教辅导
      </p>
      <div class="content">
        <div class="top">
          <div class="step-3">
            <div class="img">
              <img src="static/img/img-03.png" alt="">
            </div>
            <p>免费上门</p>
          </div>
          <div class="step-4">
            <div class="img">
              <img src="static/img/img-04.png" alt="">
            </div>
            <p>学习计划</p>
          </div>
        </div>
        <div class="middle">
          <div class="step-2">
            <div class="img">
              <img src="static/img/img-02.png" alt="">
            </div>
            <p>系统匹配</p>
          </div>
          <div class="step-5">
            <div class="img">
              <img src="static/img/img-05.png" alt="">
            </div>
            <p>学习鼓励</p>
          </div>
        </div>
        <div class="bottom">
          <div class="step-1">
            <div class="img">
              <img src="static/img/img-01.png" alt="">
            </div>
            <p>系统匹配</p>
          </div>
          <div class="step-6">
            <div class="img">
              <img src="static/img/img-06.png" alt="">
            </div>
            <p>学习鼓励</p>
          </div>
        </div>
        <div class="bg-img">
          <img src="static/img/img-circle.png" alt="">
        </div>
        <div class="btn">
          <span @click="showAsk">我要定制辅导</span>
        </div>
        <popUp ref="popUp">
          <h3 class="form_title">定制化上门辅导</h3>
          <p class="form_info">立即申请</p>
        </popUp>
      </div>
    </div>
  </div>
</template>
<script>
import popUp from "@/components/popUp.vue"
export default {
  data() {
    return {

    }
  },
  methods: {
    showAsk() {
      this.$refs.popUp.showAsk()
    }
  },
  components: {
    popUp
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.customized {
  background-color: #fff;
  padding-bottom: .78rem;
}

.customized .title {
  padding-top: .64rem;
  font-family: '微软雅黑';
  font-size: .3rem;
  color: #5d5d5d;
  letter-spacing: 1px;
}

.customized .title span {
  color: #fead29;
  font-weight: bold;
}

.customized .content {
  position: relative;
  padding-top: .74rem;
}

.customized .content>div {
  margin-bottom: .3rem !important;
}

.customized .content .top {
  display: flex;
  justify-content: space-between;
  width: 3.1rem;
  margin: 0 auto;
}

.customized .content .top .step-3 .img,
.customized .content .top .step-4 .img {
  width: .88rem;
  height: .88rem;
  border-radius: 50%;
  background-color: rgb(255, 248, 222);
  display: table-cell;
  vertical-align: middle;
}

.customized .content .top .step-3 .img img,
.customized .content .top .step-4 .img img {
  width: .52rem;
  height: .52rem;
}

.customized .content .top .step-3 p,
.customized .content .top .step-4 p {
  font-family: 'AdobeHeitiStd-Regular';
  font-size: .24rem;
  color: #ababab;
}

.customized .content .middle {
  display: flex;
  justify-content: space-between;
  width: 6.5rem;
  margin: 0 auto;
}

.customized .content .middle .step-2 .img,
.customized .content .middle .step-5 .img {
  width: .88rem;
  height: .88rem;
  border-radius: 50%;
  background-color: rgb(255, 248, 222);
  display: table-cell;
  vertical-align: middle;
}

.customized .content .middle .step-2 .img img,
.customized .content .middle .step-5 .img img {
  width: .52rem;
  height: .52rem;
}

.customized .content .middle .step-2 p,
.customized .content .middle .step-5 p {
  font-family: 'AdobeHeitiStd-Regular';
  font-size: .24rem;
  color: #ababab;
}

.customized .content .bottom {
  display: flex;
  justify-content: space-between;
  width: 7.1rem;
  margin: 0 auto;
}

.customized .content .bottom .step-1 .img,
.customized .content .bottom .step-6 .img {
  width: .88rem;
  height: .88rem;
  border-radius: 50%;
  background-color: rgb(255, 248, 222);
  display: table-cell;
  vertical-align: middle;
}

.customized .content .bottom .step-1 .img img,
.customized .content .bottom .step-6 .img img {
  width: .52rem;
  height: .52rem;
}

.customized .content .bottom .step-1 p,
.customized .content .bottom .step-6 p {
  font-family: 'AdobeHeitiStd-Regular';
  font-size: .24rem;
  color: #ababab;
}

.customized .content .bg-img {
  position: absolute;
  top: 1.94rem;
  left: 1.22rem;
  width: 5.05rem;
  height: 2.6rem;
  margin-top: .15rem;
}

.customized .content .btn {
  position: absolute;
  bottom: -.2rem;
  left: 2.27rem;
  font-size: .28rem;
  text-align: center;
}

.customized .content .btn span {
  display: inline-block;
  width: 2.96rem;
  height: .7rem;
  line-height: .7rem;
  border-radius: .5rem;
  background-color: rgb(252, 200, 3);
  color: #fff;
}

</style>
